import React from 'react'
import "./index.less"

// vant组件
import { NavBar, Search,IndexBar } from "react-vant"
// 将汉字转成拼音插件
import { pinyin } from 'pinyin-pro';
// 列表组件
import CellCom from "../cell"

import newTouch from  "../../../../utils/touch"
export default function OnlyChat(props) {
    // 索引栏数据
    const [indexList] = React.useState(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'])
    // type类型
    const [type] = React.useState(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'])
    // 模拟总数据
    const [data] = React.useState([
        {
            img: "/img/headImg.jpg",
            name: "嗣毅",
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "李宵",
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "浩普",
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "帅浩",
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "孟哲",
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "A 爸爸",
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "A 妈妈",
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "A 哥哥",
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "抖音",
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "冯都",
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "好久不见",
            type: ""
        },
        {
            img: "/img/headImg.jpg",
            name: "余孟哲",
            type: ""
        }
    ])
    // 筛选后的数据
    const [newData2, setnewData2] = React.useState([])
    // 定义一个变量用来判断是否显示索引栏标签
    const [dataArr, setDataArr] = React.useState(true)
    React.useEffect(() => {
        // 获取声母
        let newData = data.map(item => {
            return {
                img: item.img,
                name: item.name,
                types: window.isNaN(Number(item.name.split(' ')[0])) ? item.name.split(' ')[0] : Number(item.name.split(' ')[0])
            }
        })
        let arr = newData.map(item => {
            let i = type.findIndex(ite => {
                return item.types === ite
            })
            return {
                img: item.img,
                name: item.name,
                types: i !== -1 ? type[i] : typeof item.types === 'number' ? String.fromCharCode(64 + parseInt(item.types)) : pinyin(item.name, { pattern: 'initial', type: 'array' })[0].slice(0, 1)
            }
        })
        let dataFriend = [
            { type: 'A', info: [] }, { type: 'B', info: [] }, { type: 'C', info: [] }, { type: 'D', info: [] }, { type: 'E', info: [] }, { type: 'F', info: [] }, { type: 'G', info: [] }, { type: 'H', info: [] }, { type: 'I', info: [] }, { type: 'J', info: [] }, { type: 'K', info: [] }, { type: 'L', info: [] }, { type: 'M', info: [] }, { type: 'N', info: [] }, { type: 'O', info: [] }, { type: 'P', info: [] }, { type: 'Q', info: [] }, { type: 'R', info: [] }, { type: 'S', info: [] }, { type: 'T', info: [] }, { type: 'U', info: [] }, { type: 'V', info: [] }, { type: 'W', info: [] }, { type: 'X', info: [] }, { type: 'Y', info: [] }, { type: 'Z', info: [] }
        ]
        arr.forEach(item => {
            item.types = item.types === 'a' || item.types === 'A' ? 'A' : (item.types === 'b' || item.types === 'B' ? 'B' : (item.types === 'c' || item.types === 'C' ? 'C' : (item.types === 'd' || item.types === 'D' ? 'D' : (item.types === 'e' || item.types === 'E' ? 'E' : (item.types === 'f' || item.types === 'F' ? 'F' : (item.types === 'g' || item.types === 'G' ? 'G' : (item.types === 'h' || item.types === 'H' ? 'H' : (item.types === 'i' || item.types === 'I' ? 'I' : (item.types === 'j' || item.types === 'J' ? 'J' : (item.types === 'k' || item.types === 'K' ? 'K' : (item.types === 'l' || item.types === 'L' ? 'L' : (item.types === 'm' || item.types === 'M' ? 'M' : (item.types === 'n' || item.types === 'N' ? 'N' : (item.types === 'o' || item.types === 'O' ? 'O' : (item.types === 'p' || item.types === 'P' ? 'P' : (item.types === 'q' || item.types === 'Q' ? 'Q' : (item.types === 'r' || item.types === 'R' ? 'R' : (item.types === 's' || item.types === 'S' ? 'S' : (item.types === 't' || item.types === 'T' ? 'T' : (item.types === 'u' || item.types === 'U' ? 'U' : (item.types === 'v' || item.types === 'V' ? 'V' : (item.types === 'w' || item.types === 'W' ? 'W' : (item.types === 'x' || item.types === 'X' ? 'X' : (item.types === 'y' || item.types === 'Y' ? 'Y' : (item.types === 'z' || item.types === 'Z' ? 'Z' : null)))))))))))))))))))))))))
            
            dataFriend.forEach(ite => {
                if(ite.type === item.types){
                    ite.info.push(item); 
                }
            })
        })
        setDataArr(arr)
        setnewData2(dataFriend)
    }, [])
    // 返回
    const back = () => {
        props.history.push(props.location.state.path)
    }

    // input value值
    const [value, setValue] = React.useState('');

    // 跳转到好友详情
    const toFriendMsg = (item) => {
        console.log('toFriendMsg');
        console.log(item);
    }

    const mainRef = React.useRef()
    return (
        <div className='onlyChat'>
            <header>
                <NavBar
                    title="仅聊天的朋友"
                    leftArrow
                    onClickLeft={back}
                    fixed={true}
                    style={{ backgroundColor: "#ededed" }}
                />
            </header>
            <main ref={mainRef} onTouchStart={(e) => {newTouch.touchStart(e)}} onTouchMove={(e) => {newTouch.touchMove(e,mainRef)}} onTouchEnd={(e) => {newTouch.touchEnd(e,mainRef)}}>
                {/* 搜索 */}
                <div className='search'>
                    <Search value={value} onChange={setValue} background="#ededed" placeholder="搜索" />
                </div>
                {/* 提示 */}
                <div className='hint'>
                    <p>你们将互相看不到对方的朋友圈、视频动态、微信运动等、看一看以及第三方登录授权分享的内容。</p>
                </div>
                {/* 用户列表 */}
                {
                    dataArr.length!==0?<IndexBar indexList={indexList} sticky={false}>
                        {
                            newData2.map((item, index) => {
                                return <div key={index}>
                                    {
                                        item.info.length!==0?<IndexBar.Anchor index={item.type}>{item.type}</IndexBar.Anchor>:null
                                    }
                                    <div>
                                        {
                                            item.info.map((ite,ind) => {
                                                return <CellCom key={ind} toFriendMsg={() => {
                                                    toFriendMsg(ite)
                                                }} img={ite.headPortrait} title={ite.name}></CellCom>
                                            })
                                        }
                                    </div>
                                </div>
                            })
                        }
                    </IndexBar>:<p className='noFriend'>没有仅聊天的朋友</p>
                }
                {/* 底部 */}
                <div className='bottom'>
                    <p>添加</p>
                    <p>移出</p>
                </div>
            </main>
        </div>
    )
}
